<template>
	<div style="margin-left:20px">
		<table border="1px" class="tale" >
			<tr align="center" class="tale_title">
				<th>
					<label class="myLabel">姓名</label>
				</th>
				<th>
					<label class="myLabel">已有的一级4A主账号</label>
				</th>
				<th>
					<label>联系方式</label>
				</th>
				<th>
					<label>工作职责</label>
				</th>
				<th>
					<label>组织名称</label>
				</th>
				<td v-if="!print && !ifedit">
					<Button type="primary" size="small" @click="addRow">新增</Button>
				</td>
			</tr>
			<template v-for="(item, index) in people">
				<tr align="center" style="height:50px" :key="index">
					<td style="width:14%">
						<span v-if="ifedit">{{people[index].peopleName}}</span>
						<component v-else ref="inputSearch"  :dataList="peopleList"  :checkLable="people[index].peopleUserId" :is="'inputSearch'"
						  :multiple="false" @on-change="changePeople($event,index)" style="width:90%"></component>
					</td>
					<td>
						<!--                         <Form ref="people[index]" :model="people[index]" label-position="left" :label-width="0">
                      <FormItem> -->
						<span v-if="ifedit">{{people[index].fourA}}</span>
						<Input v-else style="width: 90%;" v-model="people[index].fourA" placeholder="请填写已有的4A账号"></Input>
						<!--                         </FormItem>
                      </Form> -->
					</td>
					<td>
						<span v-if="ifedit">{{people[index].phone}}</span>
						<Input v-else style="width: 90%;" v-model="people[index].phone" placeholder="请填写联系方式" maxlength="30"></Input>
					</td>
					<td>
						<span v-if="ifedit">{{people[index].duty}}</span>
						<Input v-else style="width: 90%;" v-model="people[index].duty" placeholder="请填写工作职责" maxlength="30"></Input>
					</td>
					<td>
						<template v-if="ifedit">
							<span>{{people[index].outterCompany}}</span>
						</template>
						<template v-else-if="( (!ifedit) && (people[index].companyList!=undefined && people[index].companyList!=null) )">
							<Input v-if="(people[index].companyList.length==0)" style="width: 90%;" v-model="people[index].outterCompany"
							 placeholder="请填写所属组织"></Input>
							<Select v-else style="width:90%" v-model="people[index].outterCompany" :transfer="true" filterable
							 :label-in-value='true' placeholder="请选择所属组织">
								<Option v-for="item in people[index].companyList" :value="item.gName" :key="item.gName">{{ item.gName }}</Option>
							</Select>
						</template>
						<template v-else>
							<Input style="width: 90%;" v-model="people[index].outterCompany"></Input>
						</template>
					</td>
					<td v-if="!print && !ifedit" style="width:8%">
						<Button type="warning" size="small" @click="removeRow(index)">删除</Button>
					</td>
					</Form>
				</tr>
			</template>
		</table>
	</div>
</template>

<script>
	import ajax from "../../../ajax_util"
	import inputSearch from '../../../base/input_search.vue'

	export default {
		name: "usePeople",
		components: {
			inputSearch
		},
		data() {
			return {}
		},
		computed: {
			people: {
				get: function() {
					return this.value;
				},
				set: function(value) {
					this.$emit('input', value);
				}
			},
		},
		created: function(){
			console.log("----getCompanyBefore--------",this.isShow);
			if(this.ifedit && this.isShow){
				console.log("yyyy");
				this.getCompanyBefore();
			}
		},
		methods: {
			addRow() {
				this.people.push({
					companyList: [],
		            duty: "",
		            fourA: "",
		            id: 0,
		            outterCompany: "",
		            outterCompanyId: 0,
		            peopleName: "",
		            peopleUserId: 0,
		            phone: ""
		        });
		    },
		    removeRow(index) {
		        this.people.splice(index, 1);
		    },
		    expandRow(index) {
		        if (this.people[index].isExpand < 0) {
		          this.people[index].isExpand = 0;
		        } else {
		          this.people[index].isExpand = -1;
		        }
		    },
		    changePeople(list, index) {
		        //console.log("00000000");
		        console.log("----changePeople---------", list);
		        // console.log("========", !this.ifedit);
		        if (!this.ifedit) {
		          //console.log("----changePeople---------",list,index,typeof(list[0].id));
		          this.people[index].companyList = [];
		          if (list[0] != undefined) {
		            if ((list[0].id > 0) && (typeof(list[0].id) === "number")) {
		              this.people[index].peopleUserId = list[0].id;
		              this.people[index].peopleName = list[0].user_name;
		              //this.people[index].fourA = list[0].fourA;
		              //this.people[index].phone = list[0].phone;
		              var that = this;
		              var url = this.CONFIG.url_know + '/getCom-FourA/' + this.people[index].peopleUserId;
		              ajax.get({
		                that: that,
		                url: url,
		                success: function(data) {
		                  console.log("----data--------", data);
		                  that.people[index].companyList = data.structs;
		                  that.people[index].fourA = data.fourA;
		                  that.people[index].phone = data.phone;
		                }
		              })
		            } else {
		              this.people[index].fourA = "";
		              this.people[index].phone = "";
		              this.people[index].outterCompany = "";
		              this.people[index].peopleUserId = 0;
		              this.people[index].peopleName = list[0].user_name;
		              //console.log("----peopleUserId---------",this.people);
		            }
		          };
		        }
		    },
			getCompanyBefore() {
				console.log("=====getCompanyBefore=====");
				for (var i = 0; i < this.people.length; i++) {
					console.log("=====peopleUserId=====",this.people[i].peopleUserId,i);
					if ((this.people[i].peopleUserId > 0) && (typeof(this.people[i].peopleUserId) === "number")) {
						//console.log("=====peopleUserId=====",this.people[i].peopleUserId,i);
						this.getCompany(this.people[i].peopleUserId, i);
					}
				}
			},
			getCompany(id, index) {
				console.log("----ooooooooooooo--------");
				var that = this;
				var url = this.CONFIG.url_know + '/getCom-FourA/' + id;
				ajax.get({
					that: that,
					url: url,
					success: function(data) {
						console.log("----companydata--------",data,that.people[index]);
						that.people[index].companyList = data.structs;
					}
				})
			},
		    validate(){
		    	var isSubmit = true;

				// if (this.people.length == 0) {
				// 	this.$Message.error({
				// 		content: '请至少新增一个使用人!',
				// 		duration: 3
				// 	});
				// 	isSubmit = false;
				// } else
				if (this.people.length > 0) {
					for (var i = 0; i < this.people.length; i++) {
						var number = i + 1;

						if (this.utils.objectIsEmpty(this.people[i].peopleName)) {
							this.$Message.error({
								content: '请填写第' + number + '条使用人的姓名!',
								duration: 3
							});
							isSubmit = false;
							break;
						}

						if (this.utils.objectIsEmpty(this.people[i].fourA)) {
							this.$Message.error({
								content: '请填写第' + number + '条使用人的已有一级4A主账号!',
								duration: 3
							});
							isSubmit = false;
							break;
						}
					}
				}

				return isSubmit;
		    }
		},
		props: {
			value: {},
			ifedit: {
				type: Boolean,
				default: false,
			},
			peopleList: {
				type: [Object,Array],
				default:() => {}
			},
			print: {
				default: false
			},
			isShow: {}
		},
		watch: {
			ifedit(Val) {
				console.log("===ifedit======Val====");
				this.getCompanyBefore();
			},
			isShow(Val) {
				console.log("===ifedit======Val====");
				this.isShow = Val;
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../utils/base.scss";

	.myLabel:before {
		content: '*';
		display: inline-block;
		margin-right: 4px;
		line-height: 1;
		font-family: SimSun;
		font-size: 14px;
		color: #ed4014;
	}
</style>
